<template>
  <div>
    <span
      :title="title"
      :style="[
        { fontSize: fontSize ? fontSize + 'px' : '' },
        { color: color ? color : '' }
      ]"
    >
      <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName"></use>
      </svg>
    </span>
  </div>
</template>

<script>
export default {
  name: 'icon-svg',
  props: ['title', 'name', 'fontSize', 'color'],
  computed: {
    iconName() {
      return `#i_${this.name}`
    }
  }
}
</script>

<style lang="scss" scoped>
span {
  font-size: 16px;
}

.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  cursor: pointer;
}
</style>
